寫完了基本規則，現在要把 loadScript 的例子改成使用 promise，這是原本 callback 的版本：

function loadScript(src, callback) {
    let script = document.createElement('script');
    script.src = src;

    script.onload = () => callback(null, script);
    script.onerror = () => callback(new Error(`Script load error for ${src}`));

    document.head.append(script);
}

首先， loadScript 不再需要 callback 參數，把它移除，然後函式改成回傳 promise。接著修改成檔案順利載入時呼叫 resolve，錯誤則呼叫 reject。

function loadScript(src) {
    return new Promise(resolve, reject) {
        let script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error for ${src}`));
        document.head.append(script);
    }
}

實際使用時，外層加上處理函式：

let promise = loadScript('/script.js');

promise.then(
    script => alert(`${script.src} is loaded!`),
    error => alert(`Error: ${error.message}`)
);

promise.then(script => alert('Another handler...'));

使用 promise 的優點

• 程式撰寫比較自然、直覺，loadScript 專注載入檔案，得到結果再在後面同一層的程式碼進行後續，不用把所有東西放在 callback 裡。
• 可以多次使用 then。如果有需要可在不同地方接收結果，但使用 callback 就只能在固定的地方呼叫。後面會討論 promise 鏈接，會有更多處理結果的選擇。